<template>
  <div class="weather-app">
    <!-- 头部区域 -->
    <div class="weather-header">
      <div class="search-box">
        <input 
          v-model="searchCity" 
          @keyup.enter="handleSearch"
          placeholder="输入城市名称" 
          class="search-input"
        >
        <button @click="handleSearch" class="search-button">搜索</button>
      </div>
      <h1 class="location-title">{{ weatherData.region || '黄埔区' }}</h1>
      <div class="current-weather">
        <div class="temperature">
          <span class="temp-value">{{ weatherData.current?.temp || '21' }}</span>
          <span class="temp-unit">°</span>
          <div class="weather-desc">{{ weatherData.current?.condition || '阴转多云' }}</div>
        </div>
      </div>
      <div class="update-time">{{ currentTime }}</div>
    </div>

    <!-- 天气预报区域 -->
    <div class="forecast-list">
      <div v-for="(day, index) in forecastDays" :key="index" class="forecast-item">
        <div class="forecast-date">
          <div class="date">{{ day.date }}</div>
          <div class="day">{{ day.dayName }}</div>
        </div>
        <div class="forecast-icon">
          <img :src="getWeatherIcon(day.weather)" :alt="day.weather">
        </div>
        <div class="forecast-weather">{{ day.weather }}</div>
        <div class="forecast-temps">
          <div class="high-temp">{{ day.highTemp }}</div>
          <div class="low-temp">{{ day.lowTemp }}</div>
        </div>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
      <div class="loading-text">加载中...</div>
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="error-message">
      {{ error }}
    </div>

    <!-- 生活指数和地图区域 -->
    <div class="info-map-container">
      <!-- 生活指数组件 -->
      <div class="info-section">
        <LifeIndex v-if="weatherData.region" :city="weatherData.region" />
      </div>
      
      <!-- 天气地图组件 -->
      <div class="map-section">
        <WeatherMap v-if="weatherData.region" :city="weatherData.region" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import dayjs from 'dayjs'
import { getWeatherByCity, getWeatherForecast } from './api/weather'
import LifeIndex from './components/LifeIndex.vue'
import WeatherMap from './components/WeatherMap.vue'

// 状态
const searchCity = ref('')
const weatherData = ref({})
const forecastDays = ref([])
const loading = ref(false)
const error = ref('')
const currentTime = ref('')

// 获取天气图标
const getWeatherIcon = (weather) => {
  const iconPath = '/weather-icons/'
  if (!weather) return `${iconPath}sunny.svg`
  
  // 按优先级排序的天气状态判断
  if (weather.includes('雷')) return `${iconPath}thunder.svg`
  
  // 雨的不同程度
  if (weather.includes('大暴雨') || weather.includes('特大暴雨')) {
    return `${iconPath}heavy-rain.svg`
  }
  if (weather.includes('暴雨') || weather.includes('大雨')) {
    return `${iconPath}heavy-rain.svg`
  }
  if (weather.includes('中雨')) {
    return `${iconPath}moderate-rain.svg`
  }
  if (weather.includes('小雨') || weather.includes('雨')) {
    return `${iconPath}light-rain.svg`
  }
  
  // 雪的不同程度
  if (weather.includes('大雪') || weather.includes('暴雪')) {
    return `${iconPath}heavy-snow.svg`
  }
  if (weather.includes('中雪')) {
    return `${iconPath}moderate-snow.svg`
  }
  if (weather.includes('小雪') || weather.includes('雪')) {
    return `${iconPath}snow.svg`
  }
  
  // 风的不同程度
  if (weather.includes('狂风') || weather.includes('飓风') || weather.includes('龙卷风')) {
    return `${iconPath}heavy-wind.svg`
  }
  if (weather.includes('大风')) {
    return `${iconPath}moderate-wind.svg`
  }
  if (weather.includes('微风') || weather.includes('风')) {
    return `${iconPath}wind.svg`
  }
  
  // 其他天气状态
  if (weather.includes('雾') || weather.includes('霾')) return `${iconPath}haze.svg`
  if (weather.includes('阴')) return `${iconPath}overcast.svg`
  if (weather.includes('多云')) return `${iconPath}cloudy.svg`
  
  return `${iconPath}sunny.svg`
}

// 处理搜索
const handleSearch = async () => {
  if (!searchCity.value.trim()) {
    searchCity.value = '北京'
  }

  loading.value = true
  error.value = ''

  try {
    // 获取当前天气
    console.log('正在搜索城市:', searchCity.value.trim())
    const currentWeather = await getWeatherByCity(searchCity.value.trim())
    console.log('获取到的当前天气数据:', currentWeather)

    if (currentWeather.code === 200 && currentWeather.data) {
      weatherData.value = currentWeather.data
      
      // 获取天气预报
      const forecast = await getWeatherForecast(searchCity.value.trim())
      console.log('获取到的天气预报数据:', forecast)
      
      if (forecast.code === 200 && forecast.data) {
        forecastDays.value = forecast.data.map(day => ({
          date: dayjs(day.date).format('MM-DD'),
          dayName: getDayName(dayjs(day.date)),
          weather: day.dayWeather,
          highTemp: `${day.dayTemp}°C`,
          lowTemp: `${day.nightTemp}°C`
        }))
      }
      
      error.value = ''
    } else {
      error.value = currentWeather.message || '获取天气数据失败'
      console.error('API返回错误:', currentWeather)
    }
  } catch (err) {
    console.error('搜索天气失败:', err)
    error.value = '获取天气数据失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

// 获取星期名称
const getDayName = (date) => {
  const days = ['日', '一', '二', '三', '四', '五', '六']
  return `周${days[date.day()]}`
}

// 初始化
onMounted(async () => {
  // 默认显示北京天气
  searchCity.value = '北京'
  currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
  await handleSearch()
})

// 自动更新时间
const updateTimer = setInterval(() => {
  currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
}, 1000)

// 组件卸载时清理定时器
onUnmounted(() => {
  clearInterval(updateTimer)
})
</script>

<style>
/* 全局样式 */
html, body, #app {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}

#app {
  display: flex;
  flex-direction: column;
}
</style>

<style scoped>
.weather-app {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
  background: linear-gradient(180deg, #1e3c72 0%, #2a5298 100%);
  color: white;
  font-family: 'Microsoft YaHei', sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  align-items: center;
  max-width: 1920px;
}

.weather-header {
  flex: 0 0 auto;
  text-align: center;
  padding: 0 0 16px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.forecast-list {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
  padding: 20px;
  backdrop-filter: blur(10px);
}

.search-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0 auto 24px;
  width: 100%;
  max-width: 600px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  backdrop-filter: blur(10px);
}

.search-input {
  flex: 1;
  padding: 8px 16px;
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
}

.search-input:focus {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.search-button {
  padding: 8px 20px;
  background: linear-gradient(135deg, #6e8efb, #4a6cf7);
  border: none;
  border-radius: 20px;
  color: white;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.search-button:hover {
  background: linear-gradient(135deg, #5a7ef9, #3857f6);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.search-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.location-title {
  font-size: 32px;
  font-weight: 500;
  margin: 16px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.current-weather {
  margin: 24px auto;
  width: 100%;
  max-width: 800px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.temperature {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.temp-value {
  font-size: 82px;
  line-height: 1;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.temp-unit {
  font-size: 36px;
  margin-top: 12px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.weather-desc {
  font-size: 24px;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.update-time {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 12px;
  text-align: center;
}

.forecast-item {
  display: grid;
  grid-template-columns: 120px 80px 1fr 120px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease;
}

.forecast-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.forecast-item:last-child {
  border-bottom: none;
}

.forecast-date {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.date {
  font-size: 18px;
  color: white;
}

.day {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
}

.forecast-icon {
  display: flex;
  justify-content: center;
}

.forecast-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
}

.forecast-icon img:hover {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

.forecast-weather {
  font-size: 18px;
  color: white;
  text-align: center;
}

.forecast-temps {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
}

.high-temp {
  font-size: 18px;
  color: white;
}

.low-temp {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.6);
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  margin-top: 10px;
  color: white;
}

.error-message {
  background: rgba(255, 59, 48, 0.2);
  color: white;
  padding: 12px;
  border-radius: 4px;
  margin: 20px auto;
  text-align: center;
  max-width: 800px;
  backdrop-filter: blur(10px);
}

.info-map-container {
  flex: 1;
  display: flex;
  gap: 24px;
  margin: 0 auto;
  width: 100%;
  max-width: 1440px;
  align-items: stretch;
  overflow: hidden;
  min-height: 400px;
}

.info-section {
  flex: 1;
  min-width: min(100%, 350px);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius);
  padding: var(--base-spacing);
  backdrop-filter: blur(10px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* Webkit浏览器的滚动条样式 */
.info-section::-webkit-scrollbar {
  width: 6px;
}

.info-section::-webkit-scrollbar-track {
  background: transparent;
}

.info-section::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  border: none;
}

.info-section::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.map-section {
  flex: 2;
  min-width: 550px;
  min-height: 400px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px;
  backdrop-filter: blur(10px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 大屏幕布局 */
@media (min-width: 1441px) {
  .info-map-container {
    max-width: 1400px;
  }

  .forecast-list {
    max-width: 1000px;
  }

  .info-section {
    max-width: 450px;
  }
}

/* 标准桌面布局 */
@media (max-width: 1440px) {
  .weather-app {
    padding: 20px;
  }

  .info-map-container,
  .forecast-list,
  .weather-header {
    max-width: 1200px;
  }
}

/* 小屏桌面布局 */
@media (max-width: 1200px) {
  .weather-app {
    padding: 16px;
  }

  .info-map-container,
  .forecast-list,
  .weather-header {
    max-width: 1000px;
  }

  .info-section {
    min-width: 280px;
  }

  .map-section {
    min-width: 500px;
  }
}

/* 平板布局 */
@media (max-width: 1024px) {
  .weather-app {
    padding: 16px;
  }

  .info-map-container {
    flex-direction: column;
  }

  .info-section,
  .map-section {
    width: 100%;
    min-width: 0;
  }

  .map-section {
    height: 400px;
  }

  .current-weather {
    flex-direction: column;
    gap: 20px;
  }
}

/* 大屏手机布局 */
@media (max-width: 768px) {
  .weather-app {
    padding: 12px;
  }

  .search-box {
    max-width: 100%;
  }

  .map-section {
    height: 350px;
  }

  .location-title {
    font-size: 22px;
  }

  .temp-value {
    font-size: 60px;
  }

  .temp-unit {
    font-size: 28px;
  }

  .weather-desc {
    font-size: 18px;
  }
}

/* 小屏手机布局 */
@media (max-width: 480px) {
  .weather-app {
    padding: 8px;
  }

  .search-box {
    flex-direction: column;
  }

  .map-section {
    height: 300px;
  }

  .location-title {
    font-size: 18px;
  }

  .temp-value {
    font-size: 48px;
  }

  .temp-unit {
    font-size: 22px;
  }

  .weather-desc {
    font-size: 16px;
  }

  .update-time {
    font-size: 12px;
  }
}

/* 超小屏手机布局 */
@media (max-width: 360px) {
  .weather-app {
    padding: 6px;
    gap: 6px;
  }

  .forecast-item {
    grid-template-columns: 60px 45px 1fr 60px;
    padding: 6px;
    font-size: 12px;
  }

  .map-section {
    height: 250px;
  }

  .temp-value {
    font-size: 42px;
  }

  .temp-unit {
    font-size: 20px;
  }
}

/* 横屏模式优化 */
@media (max-height: 600px) and (orientation: landscape) {
  .weather-app {
    gap: 8px;
  }

  .weather-header {
    padding: 0 0 8px;
  }

  .current-weather {
    margin: 8px auto;
  }

  .temp-value {
    font-size: 48px;
  }

  .temp-unit {
    font-size: 24px;
  }

  .weather-desc {
    font-size: 16px;
    margin-top: 4px;
  }

  .update-time {
    margin-top: 4px;
  }

  .info-map-container {
    flex-direction: row;
  }

  .map-section {
    height: auto;
    min-height: 200px;
  }
}
</style>